<template>
  <div 
    class="page-container" 
    :ref="(el) => { if (el) store.pageRef = el as HTMLDivElement }"
    @touchstart="handleTouchStart"
    @touchend="handleTouchEnd"
    @touchmove="handleTouchMove"
  >
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useTestH5Store } from '@/stores/testH5'
import { useMobileFooterFixed } from '@/hooks/useMobileFooterFixed'

const store = useTestH5Store()
const { inputRef } = storeToRefs(store)
const { isKeyboardVisible } = useMobileFooterFixed()

// 失焦逻辑
let hasMoved = false

const handleTouchStart = () => {
  // 重置移动状态
  hasMoved = false
}

const handleTouchMove = () => {
  // 滑动时标记为已移动，并立即失焦
  hasMoved = true
  if (inputRef.value) {
    inputRef.value.blur()
  }
}

const handleTouchEnd = () => {
  // 如果触摸过程中没有移动（即点击），且软键盘弹起，则失焦
  if (!hasMoved && isKeyboardVisible.value && inputRef.value) {
    // 延迟执行，避免干扰输入框的 focus 事件
    setTimeout(() => {
      if (inputRef.value) {
        inputRef.value.blur()
      }
    }, 50)
  }
}

</script>

<style scoped lang="scss">
.page-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: 750px;
  margin: 0 auto;
  background-color: #fff;
  box-sizing: border-box;
  /* 关键：禁止 iOS 弹性滚动超出 */
  overscroll-behavior: none;
  position: fixed;
}
</style>
